<script lang="ts" setup>
import {reactive, ref} from "vue";
import {goodsAddcate, goodsCatelist, goodsDelcate, goodsEditcate} from "../../api/goods";
import {ElMessage} from "element-plus";

const totles = ref<number>(0)
const cateList = ref([])
const dialogFormVisible = ref<boolean>(false)
let form: any = reactive({})
const pagin: any = reactive({
  currentPage: 1,
  pageSize: 3,
})

async function getData() {
  let res = await goodsCatelist({...pagin})
  let {total, data} = res.data
  data.forEach((v: any) => {
    v.state = v.state == 1 ? true : false
    v.isEdit = false
  })
  totles.value = total
  cateList.value = data
}

function cancelAdd() {
  ElMessage('已取消添加商品分类')
}

async function AdditemClass() {
  form.state = form.state ? 1 : 0
  let res = await goodsAddcate({...form})
  let {code, msg} = res.data
  if (code == 0) {
    getData()
    form.cateName = ""
    form.state = false
  }
}

async function handleChangEdit(row: any) {
  row.isEdit = !row.isEdit
  let {id, cateName, state} = row
  state = state ? 1 : 0
  if (!row.isEdit) {
    let res = await goodsEditcate({id, cateName, state})
  }
}

function handleSizeChange(val: any) {
  pagin.pageSize = val
  getData()
}

function handleCurrentChange(val: any) {
  pagin.currentPage = val
  getData()
}

async function deletItem(row: any) {
  let res = await goodsDelcate({id: row.id})
  let {code, msg} = res.data
  if (code == 0) {
    getData()
  }
}

function cancelDeletion() {
  ElMessage("已取消删除")
}

getData()
</script>
<template>
  <el-card class="box-card">
    <template #header>
      <div class="clearfix">
        <span>商品分类</span>
        <!-- 添加商品分类 -->
        <el-button
            style="float: right; padding: 3px 0"
            type="primary"
            @click="dialogFormVisible = true"
        >
          添加分类
        </el-button>
        <el-dialog title="商品分类" v-model="dialogFormVisible">
          <el-form :model="form" class="form" label-width="70px">
            <el-form-item label="分类名称">
              <el-input v-model="form.cateName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
              <el-switch
                  v-model="form.state"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-form>
          <!-- 取消添加商品分类 -->
          <template #footer>
                  <span class="dialog-footer">
                    <el-button
                        @click="
                        dialogFormVisible = false;
                        cancelAdd();
                      "
                    >取 消
                    </el-button>
                    <!-- 添加商品分类 -->
                    <el-button
                        type="primary"
                        @click="
                        dialogFormVisible = false;
                        AdditemClass();
                      "
                    >
                      确 定
                    </el-button>
                  </span>
          </template>
        </el-dialog>
      </div>
    </template>
    <el-table :data="cateList" highlight-current-row>
      <!-- 序号 -->
      <el-table-column type="index" label="序号"></el-table-column>
      <!-- 分类名称 -->
      <el-table-column label="分类名称">
        <template #default="scope">
          <el-input
              v-if="scope.row.isEdit"
              v-model="scope.row.cateName"
          >
          </el-input>
          <span v-else>{{ scope.row.cateName }}</span>
        </template>
      </el-table-column>
      <!-- 是否启用 -->
      <el-table-column label="是否启用">
        <template #default="scope">
          <el-switch
              v-model="scope.row.state"
              :disabled="!scope.row.isEdit"
              active-color="#13ce66"
              inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column label="操作">
        <template #default="scope">
          <!-- 编辑 -->
          <el-button
              size="mini"
              :type="scope.row.isEdit ? 'success' : ''"
              @click="handleChangEdit(scope.row)"
          >{{ scope.row.isEdit ? "完成" : "编辑" }}
          </el-button>
          <!-- 删除 -->
          <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              @confirm="deletItem(scope.row)"
              @cancel="cancelDeletion"
              title="这是一段内容确定删除吗？"
          >
            <template #reference>
              <el-button size="mini" slot="reference" type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagin">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagin.currentPage"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pagin.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totles"
      >
      </el-pagination>
    </div>
  </el-card>
</template>
<style scoped lang="scss">
.form {
  :deep(.el-input__inner) {
    width: 300px;
  }
}

.pagin {
  margin: 30px 0;
}

:deep(.el-button) {
  margin-right: 5px;
}
</style>